import React from 'react'
import Music from './Music'
import '../assets/css/list.css'
import { withRouter} from 'react-router-dom'
class List extends React.Component {
    componentWillMount() {
        this.props.getlist()
    }
    pullRouter(id){
        // console.log(id)
        this.props.history.push('/playlist?id='+id)
    }
    render() {
        let arr = [...this.props.list]
        return (
            <div className='listcontainer'>
                <br/>
                <div className='official_list'>官方榜</div>
                <br/>
                {arr.slice(0, 6).map(item => {
                    // let srcid = 'listid=' + item.id

                    return (
                        <div key={item.id}>
                            <div onClick={this.pullRouter.bind(this,item.id)}>
                                <div className='listmusic'>
                                    <div className='imgtitle'>
                                        <img src={item.coverImgUrl} alt="" className='imgtitle' />
                                        <span className='official_updateFrequency'>{item.updateFrequency}</span>
                                    </div>
                                    {/* 引入榜单音乐 */}
                                    <div>
                                        <Music {...this.props} id={item.id} />
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    )
                })}
                <div style={{ height: '50px' }}></div>
                <div className='official_list'>推荐榜</div>
                <br/>
                <div className="recommend_list">
                    {arr.slice(7, 13).map(item => {
                        // let srcid = 'listid=' + item.id

                        return (
                            <div key={item.id}>
                                <div onClick={this.pullRouter.bind(this,item.id)}>
                                    <div className='listmusic'>
                                        <div className='imgtitle2'>
                                            <img src={item.coverImgUrl} alt="" className='imgtitle2' />
                                            <span className='official_updateFrequency'>{item.updateFrequency}</span>
                                        </div>

                                    </div>
                                    {/* <div>{item.name}</div> */}
                                    <div className="list_name">{item.name}</div>
                                </div>
                            </div>
                        )
                    })}
                </div>
                <div style={{ height: '50px' }}></div>
                <div className='official_list'>更多榜单</div>
                <br/>
                <div className="recommend_list">
                    {arr.slice(14).map(item => {
                        // let srcid = 'listid=' + item.id

                        return (
                            <div key={item.id}>
                                <div onClick={this.pullRouter.bind(this,item.id)}>
                                    <div className='listmusic'>
                                        <div className='imgtitle2'>
                                            <img src={item.coverImgUrl} alt="" className='imgtitle2' />
                                            <span className='official_updateFrequency'>{item.updateFrequency}</span>
                                        </div>

                                    </div>
                                    {/* <div>{item.name}</div> */}
                                    <div className="list_name">{item.name}</div>
                                </div>
                            </div>
                        )
                    })}
                </div>
                <div style={{ height: '500px' }}></div>
            </div>
        )
    }
}

export default withRouter(List);